<script setup>
import { ref } from "vue";
import * as echarts from "echarts";
//每个朝代对应的["成就数量", "科学家数量", "著作数量", "文化数量"]数据
const dataList = ref([
  {
    dynasty: "元",
    data: [6, 22, 8, 20], // 科学家、著作、文化、自然科学成就
  },
  {
    dynasty: "唐",
    data: [10, 38, 15, 50],
  },
  {
    dynasty: "明",
    data: [25, 50, 20, 40],
  },
  {
    dynasty: "汉",
    data: [17, 37, 20, 105],
  },
  {
    dynasty: "秦",
    data: [1, 2, 5, 5],
  },
  {
    dynasty: "宋",
    data: [15, 75, 20, 85],
  },
  {
    dynasty: "先秦",
    data: [8, 28, 50, 85],
  },
  {
    dynasty: "三国",
    data: [4, 8, 8, 15],
  },
  {
    dynasty: "两晋",
    data: [7, 16, 7, 22],
  },
  {
    dynasty: "南北朝",
    data: [9, 25, 12, 25],
  },
  {
    dynasty: "五代十国",
    data: [1, 3, 5, 8],
  },
  {
    dynasty: "隋",
    data: [2, 5, 5, 18],
  },
  {
    dynasty: "清",
    data: [15, 27, 15, 32],
  },
]);
//当前显示的朝代
const dynastyData = ref("秦");
//当前显示的["成就数量", "科学家数量", "著作数量", "文化数量"]数据
const listData = ref([23, 32, 52, 33]);

//控制切换到哪个朝代的下标
const index = ref(0);

//每秒切换一次数据的函数
const switchData = () => {
  //执行一次函数年份赋值给dynastyData一次
  dynastyData.value = dataList.value[index.value].dynasty;

  //执行一次函数年份赋值给listData一次
  listData.value = dataList.value[index.value].data;
  //改变下标
  if (index.value < dataList.value.length - 1) {
    index.value++;
  } else {
    index.value = 0;
  }
};

//每一秒切换一次
setInterval(switchData, 1000);

const option = ref({
  // color: ['#44dff4'], 调色盘

  title: {
    text: "各朝代四方面数据统计", // 修改标题
    left: "center",
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params) {
      // 当前悬停的数据索引（排序后的位置）
      const sortedIndex = params[0].dataIndex;
      // 根据排序后的索引，获取原始标签
      const label = option.value.yAxis.data[sortedIndex];
      return `<div>${label} : ${params[0].value}</div><div>朝代 : ${option.value.graphic.elements[0].style.text}</div>`;
    },
  },
  // legend: {},
  // grid: {
  //   left: "3%",
  //   right: "4%",
  //   bottom: "3%",
  //   containLabel: true,
  // },
  grid: {
    left: "18%", // 左侧留更多空间
    right: "8%",
    top: "15%",
    bottom: "12%",
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    scale: true, // 让x轴数据从最低开始不是0
    min:0
  },
  yAxis: {
    inverse: true,
    type: "category",
    data: ["成就数量", "科学家数量", "著作数量", "文化数量"],
  },
  series: [
    {
      realtimeSort: true,
      name: "2011",
      type: "bar",
      data: listData,
      // barWidth: "60%", // 调整柱宽
      itemStyle: {
        borderRadius: [0, 5, 5, 0], // 顶部圆角
        color: (params) => {
          // 为每个柱子定义不同的渐变色
          const colors = [
            { start: "#80aba9", end: "#80aba9" }, // 成就数量 - 红色系
            { start: "#5c9291", end: "#5c9291" }, // 科学家数量 - 青色系
            { start: "#478384", end: "#478384" }, // 著作数量 - 蓝色系
            { start: "#43676b", end: "#43676b" }, // 文化数量 - 绿色系
          ];
          return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: colors[params.dataIndex].start },
            { offset: 1, color: colors[params.dataIndex].end },
          ]);
        },
      },
      // ===== 柱顶数值显示 =====
      label: {
        show: true,
        position: "right", // 标签显示在右侧
        color: "#36D1DC", // 使用渐变色深色
        fontSize: 14,
        fontWeight: "bold",
        offset: [10, 0], // 向右偏移
        formatter: "{@score}",
      },
      emphasis: {
        // 新增高亮效果
        itemStyle: {
          shadowColor: "rgba(0, 0, 0, 0.7)",
          shadowBlur: 10,
        },
      },
    },
  ],

  graphic: {
    elements: [
      {
        type: "text",
        right: 30,
        bottom: 60,
        style: {
          text: dynastyData,
          font: "bolder 40px monospace",
          fill: "rgba(24, 144, 255, 0.15)", //朝代字体颜色
        },
        z: 100,
      },
    ],
  },
});
</script>

<template>
  <!-- 横向柱状图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%; /* 占满整个视口高度 */
  // background: linear-gradient(45deg, #f8f9fa, #e9ecef); /* 浅灰色渐变背景 */
}
</style>
